<template>
  <el-drawer title="门店授权" :visible.sync="visible" @close="onClose" size="35%" :wrapperClosable="false"
    :close-on-press-escape="false" append-to-body>
    <el-form v-loading="loading" ref="formRef" :model="form.authList[authIndex]" :disabled="disabled" label-width="auto"
      class="form">
      <el-form-item label="渠道类型" prop="channelType" :rules="[{ required: true, message: '请选择渠道类型', trigger: 'blur' }]">
        <el-select v-model="form.authList[authIndex].channelType" @change="form.authList[authIndex].businessType = ''">
          <el-option label="抖音" value="DOUYIN" />
          <el-option label="美团" value="MEITUAN" />
          <el-option label="京东" value="JINGDONG" />
        </el-select>
      </el-form-item>
      <el-form-item label="业务类型" prop="businessType" :rules="[{ required: true, message: '请选择业务类型', trigger: 'blur' }]">
        <el-select v-model="form.authList[authIndex].businessType">
          <el-option label="核销到综" value="HX_DZ" v-if="form.authList[authIndex].channelType === 'DOUYIN'" />
          <el-option label="核销餐饮" value="HX_CY" v-if="form.authList[authIndex].channelType === 'DOUYIN'" />
          <el-option label="外卖" value="WM"
            v-if="['MEITUAN', 'JINGDONG'].indexOf(form.authList[authIndex].channelType) != -1" />
        </el-select>
      </el-form-item>
      <el-form-item label="渠道门店编号" prop="channelShopNo"
        v-if="['MEITUAN', 'JINGDONG'].indexOf(form.authList[authIndex].channelType) != -1"
        :rules="[{ required: true, message: '请输入门店在平台登录获取的账单文件里展示的门店id', trigger: 'blur' }]">
        <code-input v-model="form.authList[authIndex].channelShopNo" placeholder="门店在平台登录获取的账单文件里展示的门店id" />
      </el-form-item>
      <el-divider content-position="left">【数据授权协议】和【代运营门店扣款服务协议】</el-divider>
      <el-form-item label="上传协议" prop="qualificationPath"
        :rules="[{ required: true, message: '请上传【数据授权协议】和【代运营门店扣款服务协议】', trigger: 'change' }]">
        <YeePayFileUpload :fileType="['zip']" :limit="1" :file-size="6" type="file" keys="qualificationUrl"
          :path="form.authList[authIndex].qualificationUrl" v-model="form.authList[authIndex].qualificationPath"
          @input="uploadQualification">
        </YeePayFileUpload>
      </el-form-item>
      <template v-if="form.authList[authIndex].channelType === 'MEITUAN'">
        <el-form-item label="美团插件">
          <el-link href="/mt-plugin.zip" icon="el-icon-download" download>下载</el-link>
        </el-form-item>
      </template>
      <template v-if="form.authList[authIndex].channelType === 'JINGDONG'">
        <el-form-item label="京东插件">
          <el-link href="/jd-plugin.zip" icon="el-icon-download" download>下载</el-link>
        </el-form-item>
      </template>
    </el-form>
    <div class="footer-operation">
      <el-button @click="visible = false">返回</el-button>
      <template v-if="!disabled">
        <el-button :loading="loading" type="success" @click="save" v-clickOnce>保存草稿</el-button>
        <el-button :loading="loading" type="primary" @click="auth" v-hasPermi="['ecs:yeepayWithhold:add']" v-clickOnce>提交</el-button>
      </template>
    </div>
  </el-drawer>
</template>
<script>
import YeePayFileUpload from '@/components/yeePayFileUpload/index.vue'
import { getYeepayWithhold, updateYeepayWithhold, authYeepayWithhold } from '@/api/ecs/yeepayWithhold'

export default {
  name: 'YeepayWithholdShopAuth',
  components: { YeePayFileUpload, },
  data() {
    return {
      visible: false,
      loading: false,
      disabled: false,
      authIndex: 0,
      form: {
        id: '',
        authList: [{
          requestNo: '',
          channelType: '',
          businessType: '',
          channelShopNo: '',
          qualificationUrl: '',
          qualificationPath: '',
        }],
      },
      showResolve: (value) => { },
      showReject: (reason) => { },
    }
  },
  created() {
  },
  methods: {
    show(id, requestNo, disabled = false) {
      if (id) {
        getYeepayWithhold(id).then(res => {
          this.form = { ...res.data }
          if (!this.form.authList) this.form.authList = []
          if (requestNo) {
            this.authIndex = this.form.authList.findIndex(a => a.requestNo === requestNo)
          } else {
            this.authIndex = this.form.authList.length
            this.form.authList.push({
              requestNo: '',
              channelType: '',
              businessType: '',
              channelShopNo: '',
              qualificationUrl: '',
              qualificationPath: '',
            })
          }
        }).catch(err => {
          this.visible = false
        })
      } else {
        return;
      }
      this.disabled = disabled
      this.visible = true
      return new Promise((resolve, reject) => {
        this.showResolve = resolve
        this.showReject = reject
      })
    },
    onClose() {
      this.$refs.formRef?.resetFields()
    },
    save() {
      updateYeepayWithhold(this.form).then(res => {
        if (res.code === 200) {
          this.visible = false
          this.showResolve()
        }
      })
    },
    auth() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          updateYeepayWithhold(this.form).then(res => {
            if (res.code === 200) {
              const auth = this.form.authList[this.authIndex]
              return authYeepayWithhold(this.form.id, auth.channelType, auth.businessType)
            }
          }).then(res => {
            if (res.code === 200) {
              this.visible = false
              this.showResolve()
            }
          })
        }
      })
    },
    uploadQualification(val1, val2, val3) {
      this.form.authList[this.authIndex].qualificationUrl = val3
    }
  },
}
</script>
<style scoped lang="scss">
.form {
  padding: 20px 20px 80px 20px;
}

.footer-operation {
  bottom: 0;
  width: 100%;
  height: 80px;
  display: flex;
  z-index: 10000;
  padding: 0 20px;
  text-align: center;
  position: absolute;
  align-items: center;
  background-color: #ffffff;
  border-top: 1px solid #EBEEF5;

  .el-button {
    width: 100%;
  }
}
</style>
